var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = {
    // devtool: 'eval-source-map', //配置生成Source Maps，利于排错和定位
    //插件项
    plugins: [
        //提公用js到common.js文件中
        new webpack.optimize.CommonsChunkPlugin('common.js'), 
        //将样式统一发布到style.css中
        new ExtractTextPlugin('style.css', {
            allChunks: true,
            disable: false
        }),
        //使用ProvidePlugin加载使用频率高的模块
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
        //压缩代码
        new webpack.optimize.UglifyJsPlugin({    
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require']    //排除关键字
        })
    ],
    //页面入口文件配置,如果你有多个入口js,需要打包在一个文件中,那么你可以这么写 entry : ['./app1.js', './app2.js']
    entry: __dirname + '/index.js',
    //入口文件输出配置
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        publicPath: '/assets/',
        chunkFilename: "[id].chunk.js"
    },
    module: {
        //加载器配置,"-loader"其实是可以省略不写的,多个loader之间用"!"连接起来
        loaders: [
            //.css文件使用style-loader、css-loader和postcss-loader来处理
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")},
            //.less文件使用style-loader、css-loader、less-loader和postcss-loader来编译处理
            {test: /\.less$/, loader: 'style!css!less!postcss'},
            //.js文件使用json-loader来处理
            {test: /\.json$/, loader: 'json'},
            //.js文件使用babel-loader来编译处理,将es6转es5
            {test: /\.js$/, loader: 'jsx!babel?presets[]=es2015', exclude: /node_modules/}, 
            //图片文件使用url-loader来处理,小于8kb的直接转为base64
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    postcss: function() {
        return [autoprefixer] //调用autoprefixer插件添加供应商前缀
    },
    //其它解决方案配置
    resolve: {
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.css', '.js', '.json', '.less'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            a: './js/bind.js', //后续直接 require('a') 即可
            greet: './js/greeter.js'
        }
    }
};